import React from 'react';
import styles from './index.less';
import { connect } from 'dva';
import {Row, Col,} from 'antd';
import {Map,Layers,layer,Controls,control,CustomSource} from '@/components/Gmap/Openlayer';
import { TileArcGISRest,XYZ,Stamen,ImageArcGISRest,VectorTile as VectorTileSource} from 'ol/source.js'
import VectorSource from 'ol/source/Vector';

import {KML,GeoJSON,MVT} from 'ol/format';
import {bbox as bboxStrategy} from 'ol/loadingstrategy';
import { Style, Stroke, Fill, Text, Circle, Icon } from 'ol/style.js'


@connect(({ demo }) => ({ demo }))
class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
    this.source = {
      'amap': new XYZ({
        url: 'http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
      }),
      'stamen': new Stamen({
        layer: 'toner'
      }),
      'vectorSource': new VectorSource({
          format: new GeoJSON(),
          url: function(extent, resolution, projection) {
            const projCode = projection.getCode();
            return `http://geoserver.cindata.cn/geoserver/gxd/ows?service=WFS
            &version=1.0.0&request=GetFeature&typeName=gxd:gp_community&maxFeatures=3000&outputFormat=application%2Fjson
            &srsname=${projCode}&bbox=${extent.join(',')},${projCode}`;
          },
          strategy: bboxStrategy
        }),
      'image': new ImageArcGISRest({
        ratio: 1,
        params: {},
        url: 'http://tilesvc.cindata.cn/arcgis/rest/services/comm/grarea/MapServer'
      }),
      'pbf': new VectorTileSource({
        maxZoom: 15,
        format: new MVT({
          idProperty: 'iso_a3'
        }),
        url: 'https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/' +
          'ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf'
      }),
    }
    this.style = {
      'point': feature=> {
        return new Style({
          image: new Circle({
            radius: 3,
            stroke: new Stroke({
              color: 'rgba(0,120,240,1)',
              width: 1,
            }),
            fill: new Fill({
              color: 'rgba(0,120,240,0.3)',
            }),
          })
        })
      },
      'polygon': new Style({
        stroke: new Stroke({
          color: 'rgba(200,20,20,0.8)',
          width: 2
        }),
        fill: new Fill({
          color: 'rgba(200,20,20,0.4)'
        })
      }),
      'cluster': function(feature) {
        const size = feature.get('features').length;
        const style = new Style({
          image: new Circle({
            radius: 15,
            stroke: new Stroke({
              color: '#fff'
            }),
            fill: new Fill({
              color: '#3399CC'
            })
          }),
          text: new Text({
            text: size.toString(),
            fill: new Fill({
              color: '#fff'
            })
          })
        })
        return style;
      }
    }
  }

  componentDidMount() {
    this.init();
  }

  init = () => {

  };

  render() {
    return (
      <div className={styles.mainPage}>
        <Row>
          <Col span={24}>
              <Map view={{center:[12950795.908819556, 5003290.508084635],zoom: 7}} >
                  <Layers>
                      <layer.Tile source={CustomSource.osm} visible={false} opacity={1}/>
                      <layer.Tile source={CustomSource.stamen} visible={false} opacity={1}/>
                      <layer.Tile source={CustomSource.amap_vec} visible={false} opacity={1}/>
                      <layer.Tile source={CustomSource.amap_img} visible={false} opacity={1}/>
                      <layer.Tile source={CustomSource.amap_img_label} visible={false} opacity={1}/>
                      <layer.Tile source={CustomSource.tdt_vec_w} visible={false} opacity={1}/>
                      <layer.Tile source={CustomSource.tdt_cva_w} visible={false} opacity={1}/>
                      <layer.Tile source={CustomSource.tdt_img_w} visible={false} opacity={1}/>
                      <layer.Tile source={CustomSource.tdt_cia_w} visible={false} opacity={1}/>
                      <layer.Tile source={CustomSource.tdt_ter_w} visible={false} opacity={1}/>
                      <layer.Tile source={CustomSource.tdt_cta_w} visible={false} opacity={1}/>
                      <layer.Tile source={CustomSource.gxd_ChinaPolarNightBlue} visible={true} opacity={1}/>

                      <layer.Tile source={this.source.amap} visible={false} opacity={1}/>
                      <layer.Tile source={this.source.stamen} visible={false} opacity={1}/>

                      <layer.Heatmap source={this.source.vectorSource}  visible={true} opacity={0.8}
                                   blur={5} radius={5} weight={feature=>{return 100}} />
                      <layer.Vector source={this.source.vectorSource}  visible={false} opacity={1}
                                   style={undefined}/>
                      <layer.Image source={this.source.image} visible={false}/>
                      <layer.VectorTile source={this.source.pbf} visible={false} style={this.style.polygon}/>
                      <layer.Cluster source={this.source.vectorSource}  visible={true} opacity={1}
                                     distance={100} style={this.style.cluster}/>
                  </Layers>
                  <Controls zoom={false} attribution={false}>
                      <control.Attribution collapsible={true} tipLabel={'属性'}/>
                      <control.Zoom zoomInTipLabel={'放大'} zoomOutTipLabel={'缩小'} />
                      <control.ScaleLine />
                      <control.FullScreen />
                      <control.Rotate />
                  </Controls>
              </Map>
          </Col>
        </Row>
      </div>
    );
  }
}

export default Index;
